<template>
  <div style="margin: auto"><h1>角色管理</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="name"
        label="同户名"
        width="600px">
    </el-table-column>
    <el-table-column
        label="操作"
        width="400px">
      <template #default="scope">
        <el-button type="primary" size="small" @click="del(scope.row.id)">删除角色</el-button>
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.findVisible=true">查看角色权限</el-button>
        <el-button type="primary" size="small" @click="updateFind(scope.row.id);this.roleId=scope.row.id">修改角色权限</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <el-button type="primary" @click="this.addVisible=true" style="margin-top: 60px;margin-left: 50px;size: 20px">添加新角色</el-button>


<!--  查看-->

  <el-dialog
      v-model= "findVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">查看角色</h1>
    <div style="margin-left: 200px;margin-top: 50px">角色名称:<span style="margin-left: 50px">{{this.roles.name}}</span></div>
    <el-form-item label="拥有权限" prop="gradeShow">
      <el-tag
          style="margin: 2px 2px"
          v-for="grade in power"
          size="small">{{ grade.name }}
      </el-tag>
    </el-form-item>
    <el-button type="primary" @click="this.findVisible=false" style="margin-top: 30px;margin-left: 50px;size: 20px" >确定</el-button>
  </el-dialog>

<!--  修改-->

  <el-dialog
      v-model= "updateVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">查看角色</h1>
    <div style="margin-left: 200px;margin-top: 50px">角色名称:<span style="margin-left: 50px">{{this.roles.name}}</span></div>
    <el-form-item label="拥有权限" prop="phone">
      <el-checkbox-group
          v-model="powerId"
      >
        <el-checkbox v-for="power in this.powerAll" :key="power.id" :label="power.id">
          {{
            power.name
          }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-button type="primary" @click="update" style="margin-top: 30px;margin-left: 50px;size: 20px" >确定</el-button>
  </el-dialog>

  <el-dialog
      v-model= "updateDiv"
      title=""
      width="20%"
      center>
    <h3>修改成功</h3>
    <el-button type="primary" @click="this.updateDiv=false;this.updateVisible=false;" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>


  <!--  添加-->

  <el-dialog
      v-model= "addVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">查看角色</h1>
    <div style="margin-left: 200px;margin-top: 50px">角色名称:<input type="text" v-model="this.addRole"></div>
    <el-form-item label="拥有权限" prop="phone">
      <el-checkbox-group
          v-model="powerId"
      >
        <el-checkbox v-for="power in this.powerAll" :key="power.id" :label="power.id">
          {{
            power.name
          }}
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-button type="primary" @click="add" style="margin-top: 30px;margin-left: 50px;size: 20px" >确定</el-button>
  </el-dialog>

  <el-dialog
      v-model= "addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false;this.addVisible=false;" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>

<!--  删除提示-->
  <el-dialog
      v-model= "delDiv"
      title=""
      width="20%"
      center>
    <h3>删除成功</h3>
    <el-button type="primary" @click="this.delDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
  data(){
    return{
      cutObj:[],
      findObj:{},
      roles: {},
      power:[],
      findVisible:false,
      updateVisible:false,
      addVisible:false,
      powerAll:[],
      roleId:0,
      powerId:[],
      updateDiv:false,
      addDiv:false,
      addRole:"",
      delDiv:false,
    }
  },
  methods:{
    findByItem(pageNo){
      this.findObj.pageNo = pageNo;
      axios.get("/project/role/findByItem",{params:this.findObj}).then(resp=>{
        this.cutObj = resp.data;
      })
    },
    del(roleId){
      axios.get("/project/role/del",{params:{
          roleId
        }}).then(resp=>{
          if (resp.data=="ok"){
            this.delDiv=true;
            this.findByItem(1);
          }
      })
    },
    findById(id){
      axios.get("/project/role/findById",{params:{
          id
        }}).then(resp=>{
         this.roles=resp.data;
         this.power=resp.data.powerList;
      })
    },
    updateFind(id){
      this.powerId=[];
      this.updateVisible=true;
      axios.get("/project/role/findById",{params:{
          id
        }}).then(resp=>{
        this.roles=resp.data;
        resp.data.powerList.forEach(n=>{
          this.powerId.push(n.id);
        });
      })
    },
    findAll(){
      axios.get("/project/power/findAll").then(resp=>{
        this.powerAll=resp.data;
      })
    },
    update(){
      axios.get("/project/role/update",{params:{
          roleId:this.roleId,
          powerId:this.powerId
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, {arrayFormat: 'repeat'})
        }
      }).then(resp=>{
       if (resp.data=="ok"){
         this.updateDiv=true;

       }
      })
    },
    add(){
      axios.get("/project/role/add",{params:{
          name:this.addRole,
          powerId:this.powerId
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, {arrayFormat: 'repeat'})
        }
      }).then(resp=>{
          if (resp.data=="ok"){
            this.addDiv=true;
            this.findByItem(1);
          }
      })
    }
  },
  created() {
    this.findByItem(1);
    this.findAll();
  }
}
</script>

<style scoped>

</style>